<template>
	<!-- 为你推荐 -->
	<view class="indexmrjx">
		<view class="indexmritem" v-for="(item,index) in detail" :key="item.id"
		
		@click="$Router.push({ path: '/pages/product/product-xq', query: { id: item.value_param.id } })"
		>
		
			<image :src="item.value_param.image" mode=""></image>
			<view class="u-line-1">
				{{item.value_param.title}}
			</view>
			<view class="mrtjflex">
				<text v-if="item.value_param.original_price != 0">￥{{ parseFloat(item.value_param.original_price)}}</text>
				<text v-else></text>
				
				<text>￥{{ parseFloat(item.value_param.price)}}</text>
			</view>
		</view>
		
		<button v-show="total > perPage" class="u-reset-button refresh-btn u-m-y-20 u-flex u-col-center u-row-center" @tap.stop="loadMore">
			<text class="u-m-r-6 u-iconfont uicon-reload" style="font-size: 28rpx;color: #999" :class="{ 'refresh-active': isRefresh }"></text>
			{{ listParams.page >= lastPage ? '收起' : '加载更多' }}
		</button>
	</view>
	
</template>

<script>
/**
 * 自定义之为你推荐
 * @property {Object} detail - 推荐商品信息
 */

export default {

	data() {
		return {
			listParams: {
				page: 1
			}, //当前分页
			lastPage: 1, //总分页
			total: 0, //总商品数
			perPage: 0, //单页商品数
			goodsList: [],
			isRefresh: false,

			// 瀑布流 350-330
			addTime: 100, //排序间隙时间
			leftHeight: 0,
			rightHeight: 0,
			leftList: [],
			rightList: [],
			tempList: [],

			goodsType: this.detail.style // 商品模板
		};
	},

	props: {
		detail: {
			type: Object,
			default: () => []
		}
	},
	created() {
		if (this.detail.id) {
			this.listParams.category_id = this.detail.id;
			this.getGoodsList();
		}
		if (this.detail.ids) {
			this.listParams.goods_ids = this.detail.ids;
			this.getGoodsList();
		}
	},
	methods: {
		// 瀑布流相关
		async splitData() {
			if (!this.tempList.length) return;
			let item = this.tempList[0];
			if (!item) return;

			// 分左右
			if (this.leftHeight < this.rightHeight) {
				this.leftHeight += item.activity_discounts_tags?.length ? 350 : 330;
				this.leftList.push(item);
			} else if (this.leftHeight > this.rightHeight) {
				this.rightHeight += item.activity_discounts_tags?.length ? 350 : 330;
				this.rightList.push(item);
			} else {
				this.leftHeight += item.activity_discounts_tags?.length ? 350 : 330;
				this.leftList.push(item);
			}

			// 移除临时列表的第一项，如果临时数组还有数据，继续循环
			this.tempList.splice(0, 1);
			if (this.tempList.length) {
				setTimeout(() => {
					this.splitData();
				}, this.addTime);
			}
		},
		clear() {
			this.leftList = [];
			this.rightList = [];
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.tempList = [];
		},

		// 商品列表
		getGoodsList() {
			let that = this;
			that.$http('goods.lists', this.listParams).then(res => {
				if (res.code === 1) {
					this.lastPage = res.data.last_page;
					this.total = res.data.total;
					this.perPage = res.data.per_page;
					this.isRefresh = false;
					that.goodsList = [...that.goodsList, ...res.data.data];
					that.tempList = res.data.data;
					that.goodsList.length && that.splitData();
				}
			});
		},

		// 加载更多
		loadMore() {
			if (!this.isRefresh) {
				// 加载更多
				if (this.listParams.page < this.lastPage) {
					this.isRefresh = true;
					this.listParams.page += 1;
					this.getGoodsList();
				} else {
					// 重置为1页数据
					this.listParams.page = 1;
					this.lastPage = 1;
					this.goodsList = [];
					this.clear();
					this.getGoodsList();
				}
			}
		}
	}
};
</script>

<style lang="scss">
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}
.u-waterfall {
	@include vue-flex;
	flex-direction: row;
	align-items: flex-start;
}

.u-column {
	@include vue-flex;
	flex: 1;
	flex-direction: column;
	height: auto;
}

.u-image {
	width: 100%;
}
// 为你推荐
.hot-goods {
	background: none;
	.refresh-btn {
		margin-left: 50%;
		transform: translateX(-50%);
		width: 156rpx;
		line-height: 50rpx;
		background: #ffffff;
		border-radius: 25rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
		white-space: nowrap;
	}
	.refresh-active {
		transform: rotate(360deg);
		transition: all linear 0.5s;
	}
}
.indexspfl{
		display: flex;
		flex-wrap: wrap;
		padding-top: 34rpx;
	}
	.indexspfl>view{
		width: 25%;
		text-align: center;
		
	}
	.indexspfl>view>view{
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
	}
	.idfl>image{
		width: 67rpx ;
		height: 86rpx;
	}
	.idfl{
		margin: 30rpx auto 9rpx;
		width: 120rpx;
		height: 120rpx;
		background: #F8F9FD;
		border-radius: 10rpx;
	}
	.indexzxcvp{
		height: 100%;
		height:328rpx;
		max-height: 328rpx;
		margin: 59rpx 0 40rpx;
	}
	.indexzxcvp>image{
		width: 100%;
		max-height: 100%;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}
	.indexsscx{
		height: 100%;
		height:200rpx;
		max-height: 200rpx;
		margin: 50rpx 0 59rpx;
	}
	.indexsscx>image{
		width: 100%;
		max-height: 100%;	
		border-radius: 10rpx;
	}
	.indexmrjxtitle>text:first-of-type{
		font-size: 36prx;
		font-weight: 550;
		color: #333333;
		margin-right: 30rpx;
	}
	.indexmrjxtitle>text:last-of-type{
		font-size: 30prx;
		color: #333333;
		font-weight: 400;
		margin-left: 30rpx;
	}
	.indexmrjxtitle{
		margin-bottom: 40rpx;
	}
	.indexmrjx{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding:40rpx 50rpx;
		/* width: calc(100% - 100rpx); */
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.indexmritem{
		text-align: center;
		margin-top: 50rpx;
		width: 38%;
	}
	.indexmritem:nth-child(1){
		margin-top: 0;
	}
	.indexmritem:nth-child(2){
		margin-top: 0;
	}
	// .indexmritem:nth-child(3){
	// 	margin-top: 0;
	// }
	.indexmritem>image{
		// width: 144rpx;
		// width: 153rpx;
		// height: 153rpx;
		width: 232rpx;
		height: 200rpx;
	}
	.mrtjflex{
		display: flex;
		justify-content: center;
		padding: 0 5rpx;
	}
	.mrtjflex>text:first-of-type{
		margin-right: 20rpx;
	}
	.indexmritem>view:first-of-type{
		// font-size: 24rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin: 20rpx 0 18rpx;
	}
	.mrtjflex>text:first-of-type{
		// font-size: 22rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #7C7C7C;
		text-decoration: line-through;
	}
	.mrtjflex>text:last-of-type{
		// font-size: 24rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #FF9A33;
	}
	.indexjxl{
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 34rpx;
		margin-bottom: 40rpx;
		padding: 30rpx 20rpx 40rpx;
		/* width: calc(100% - 40rpx); */
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.indexjxlitem image{
		width: 330rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}
	.indexjxlitem>text{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.indexjxlitem>view{
		font-size: 20rpx;
		font-weight: 500;
		color: #7C7C7C;
		margin: 15rpx 0 16rpx;
	}
	.yhyyhl{
		width: 100%;
		height: 130rpx;		border-radius: 30rpx;
		margin-bottom: 56rpx;
		overflow: hidden;
	}
	.yhyyhl>image{
		width: 100%;
		height: 100%;;
	}
	.indexsx{
		padding: 0 20rpx;
		/* width: calc(100% -40rpx); */
		display: flex;
		justify-content: space-between;
	}
	.indexsxitem>text{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 12rpx;
		display: block;
		text-align: center;
	}
	.indexsxitem>view{
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #7C7C7C;
		width: 108rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
	}
	.indexcpactiv>view{
		width: 108rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		background: #FF9A33;
		border-radius: 15rpx;
		color: #FFFFFF;
	}
	.cplist{
		margin-top: 50rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.cpitem{
		text-align: center;
		background: #FFFFFF;
		border-radius: 10rpx;
		position: relative;
		margin-bottom: 35rpx;
		padding: 45rpx 20rpx 40rpx;
		width: 48%;
	}
	.cpitem>view{
		text-align: left;
	}
	.jia{
		position: absolute;
		right: 0;
		bottom: 0;
		width: 70rpx;
		text-align: center !important;
		line-height: 44rpx;
		color: #FF9A33;
		height: 44rpx;
		border: 1rpx solid #FF9A33;
		border-radius: 30rpx 0rpx 10rpx 0rpx;
	}
	.cpitem>image{
		width: 182rpx;
		height: 231rpx;
	}
	.cptitle{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin: 77rpx 0 29rpx;
	}
	.cpms{
		font-size: 24rpx;
		font-weight: 500;
		color: #7C7C7C;
		margin: 29rpx 0 40rpx;
	}
	.cpjg{
		font-size: 24rpx;
		font-weight: 800;
		color: #FF9A33;
	}
	.indexq3{
		display: flex;
		justify-content: space-between;
				margin-bottom: 30rpx;
	}
	.indexqview{
		width: 330rpx;;
	}
	.indexq1{
		/* width: calc(330rpx - 50rpx); */
		/* padding: 20rpx 25rpx 0 25rpx; */
		background: #EBF4FD;
		position: relative;
		border-radius: 10rpx;
	}
	.indexq1 image{
		/* width: 281rpx;
		height: 330rpx;
		position: absolute;
		bottom: 0; */
	}
	._h2{
		display: flex;
		justify-content: space-between;
	}
	.indexq2{
		/* padding: 112rpx 20rpx 20rpx 0; */
		/* width: calc(330rpx - 20rpx); */
		text-align: right;
		position: relative;
		/* background: #FFFFFF; */
		border-radius: 10rpx;
		margin-bottom: 12rpx;
	}
	.indexq2>image{
		/* position: absolute;
		top: 10rpx;
		left: 10rpx;
		width: 113rpx;
		height: 142rpx; */
	}
	.xhc{
		font-size: 30rpx;
		font-weight: 800;
		color: #333333;
	}
	.xhc1{
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin: 19rpx 0 10rpx;
	}
	.xhc2{
		width: 70rpx;
		text-align: center;
		height: 40rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FF9A33;
		line-height: 40rpx;
		border: 1rpx solid #FF9A33;
		border-radius: 4rpx;
	}
	.xhj{
		font-size: 30rpx;
		font-weight: 800;
		color: #FF9A33;
	}
	.xhj1{
		font-size: 20rpx;
		font-weight: 400;
		color: #333333;
	}
	.xhj2{
		font-size: 26rpx;
		font-weight: 800;
		color: #333333;
		margin: 20rpx 0 13rpx;
	}
	.indexq1right>.indexq2:last-of-type{
		margin-bottom: 0;
	}
	.indexmrjx>view:nth-child(4),.indexmrjx>view:nth-child(5),.indexmrjx>view:nth-child(6){
		margin-bottom: 0 ;
	}
	.mrtjflex > text:last-of-type{
		position: relative;
		right: 4rpx;
	}
</style>
